<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <input type="text" id="words">
    <input type="button" value="发布" id="btn">

</body>

</html>
<script>
    //获取bnt结构
    var btn = document.getElementById('btn')
    // 设置点击事件
    btn.onclick = function () {
        //设置一个全局定时器
        var timer
        // 获取结构
        var words = document.getElementById("words").value;
        //清空输入值
        document.getElementById("words").value = ""
        //创建一个span标签
        var span = document.createElement("span")
        //将输入的内容放入html中
        span.innerHTML = words;
        //给span标签定位，设置样式
        span.style.position = "absolute"
        span.style.left = "1200px"
        //利用随机数，决定每个标签的高度不同
        //Math.floor 取整
        // document.documentElement.clientHeight代表HTML标签的高度
        span.style.top = Math.floor(document.documentElement.clientHeight * Math.random()) + 'px';
        //设置颜色随机值 
        var color1 = parseInt(Math.random() * 256);
        var color2 = parseInt(Math.random() * 256);
        var color3 = parseInt(Math.random() * 256);
        //进行拼接
        var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
        //把颜色样式赋值给span
        span.style.color = color;
        //将span输入内容放在页面里
        document.body.appendChild(span)
        //设置定时器
        timer = setInterval(function () {
            //让span标签每50毫秒走四像素
            span.style.left = parseInt(span.style.left) - 4 + 'px'
            // 表示当span的左边的距离小于span内容长度时候销毁，-1即当标签完全消失在页面中销毁
            if (parseInt(span.style.left) < -1 * span.offsetWidth) {
                //清空定时器
                clearInterval(timer);
                //清除span
                document.body.removeChild(span)
            }
        }, 50)
    }
</script>
<script>
    // Math.floor()  向下取整
    // Math.random() 获取0~1的随机数(不包含0,1)

    // 获取0~10的随机整数(包含0不包含10)
    // console.log(Math.floor(Math.random()*10));
    // 获取0~10的随机整数(包含0包含10)
    // console.log(Math.floor(Math.random()*11));

    // 获取10~20的随机整数(包含10包含20)
    // console.log(Math.floor(Math.random()*11)+10);

    // 获取20~50的随机整数(包含20包含50)
    // console.log(Math.floor(Math.random()*(50-20+1))+20);

    // 获取m~n的随机整数(包含m包含n)
    function getNum(m,n){
        return Math.floor(Math.random()*(n-m+1)+m);
    }
    console.log(getNum(0,255));





</script>
